<template>
	<view class="member">
		<!-- 导航栏 -->
		<view class="navBox flex-r-s-c" :style="'top:'+ (height + 8) + 'rpx'">
			<u-icon style="position: absolute; left: 40rpx; top: 50%; transform: translateY(-50%);" name="arrow-left"
				size="32" @tap="navigateBack"></u-icon>
			<view class="text">会员</view>
		</view>
		<!-- 背景 -->
		<view class="bjImage">
			<image :src="image+'assets/web_img/edit16.png'" mode=""></image>
		</view>
		<!-- 会员卡 -->
		<view class="cardBox">
			<view class="nameBox flex-r-s-c">
				<image src="/static/my/hyhgbj.png" mode=""></image>
				<view class="text">墨典奶茶会员卡</view>
			</view>
			<view class="imageBox">
				<image src="/static/my/zsbj.png" mode=""></image>
			</view>
			<!-- <view class="number">NO：{{pageData.no}}</view> -->
		</view>
		<!-- 简介 -->
		<view class="introduce">
			<u-parse :html="pageData.content"></u-parse>
		</view>
		<!-- 购买 -->
		<view class="purchase">
			<view class="" style="display: inline-block;">
				<u-checkbox-group style="float: left;height: 22rpx;line-height: 48rpx;">
					<u-checkbox v-model="checked" shape="circle" active-color="#000">
						我已阅读并同意 
					</u-checkbox>	
				</u-checkbox-group>
				<view class="agreement" style="color: #000;float: left;height: 40rpx;line-height:50rpx;" @click="toAgree">《付费会员服务协议》</view>
			</view>
			
			<view class="btn" @tap="purchase">购买会员</view>
		</view>
		<view style="width: 100%; height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				pageData: {}
			};
		},
		onLoad() {
			this.getMember()
		},
		methods: {
			toAgree(){
				uni.navigateTo({
					url:'/pages/my/agreement/agreement?type=3'
				})
			},
			// 返回
			navigateBack(){
				uni.navigateBack()
			},
			// 获取会员卡信息
			getMember(){
				let that = this
				that.$api.agreementInfo({
					type:'6'
				}).then(res => {
					that.pageData = res.data.data
				})
			},
			// 点击支付生成订单
			purchase(){
				let that = this
				if(!that.checked) return that.$utils.toast('请勾选付费会员服务协议')
				that.$api.weChatPay({
					type: 'hy'
				}).then(res => {
					uni.requestPayment({
						...res.data.data,
						success(res1){
							// console.log(res1)
							that.$utils.toast('购买成功')
							uni.navigateBack()
						},
						fail(err) {
							console.log(err)
						}
					})
				})
			},
		}
	}
</script>

<style lang="less">
	.member {
		width: 100vw;
		position: relative;

		.navBox {
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			left: 0;
			position: absolute;

			.text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.bjImage {
			width: 100%;

			image {
				width: 100%;
				height: 512rpx;
			}
		}

		.cardBox {
			width: 90%;
			height: 280rpx;
			background: linear-gradient(180deg, #F7F0E5 0%, #EBDCC7 100%);
			border-radius: 20rpx;
			backdrop-filter: blur(10px);
			margin: 0 auto;
			margin-top: -200rpx;
			position: relative;

			.nameBox {
				position: absolute;
				left: 60rpx;
				top: 30rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 30rpx;
				}

				.text {
					font-size: 32rpx;
					font-weight: 400;
				}
			}

			.imageBox {
				width: 220rpx;
				height: 184rpx;
				position: absolute;
				top: 20rpx;
				right: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.number {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

		}

		.introduce {
			width: 90%;
			margin: 30rpx auto;
		}


		.purchase {
			width: 90%;
			// position: fixed;
			// bottom: 200rpx;
			// left: 50%;
			// transform: translateX(-50%);
			margin: 0 auto;
			margin-top: 100rpx;
			.btn{
				width: 100%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				background-color: #000;
				color: #fff;
				border-radius: 96rpx;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

	}
</style>
